<template>
  <div class="title-line-box" :style="styleObj">
    <div class="title-line">
      <span class="line"></span>
      <h3 class="title">
        {{ title }}
      </h3>
    </div>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'TitleLine',
  props: {
    title: {
      type: String,
      default: ''
    },
    styleObj: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style lang="scss" scoped>
.title-line-box {
  display: flex;
  align-items: center;
  margin: 20px 0;
  .title-line {
    display: flex;
    align-items: center;
    .line {
      width: 4px;
      height: 16px;
      margin-right: 10px;
      background-color: $hw-color-primary;
    }
    .title {
      font-size: $hw-font-size-base;
    }
  }
}
</style>
